var mySwiper = new Swiper("#ying_sipder", {
    direction: 'horizontal', //默认horizontal, 水平轮播
    autoplay: true, //自动切换
    loop: true, //循环
    centeredSlides: true,
    slidesPerView: "auto", //默认1, 同时显示的slides数量,auto 代表根据轮播图的宽度排列
    spaceBetween: 20, //轮播图之间的间距
    slideActiveClass: 'my-slide-active',
})
var content = document.getElementsByClassName("right-content")[0];
var contentM = document.getElementsByClassName("right-content-mobile")[0];
var titleM = document.getElementsByClassName("right-title-mobile")[0];
var img = document.getElementsByClassName("phone-img")[0];
var contentArr = [{
        title: '品牌营销',
        content: [
            { card: "搜索品专", img: 'https://adyouyi.com/assets/media/b_1_1.mp4', type: 'mp4', des: '广告在APP打开时以原生形式出现在视频内容流场景，融入原生场景，结合用户兴趣呈现广告内容，支持站内外多种落地页形式，强势锁定新一代的注意力' },
            { card: "开屏", img: 'https://adyouyi.com/assets/media/b_1_2.mp4', type: 'mp4', des: '广告在APP打开时半屏/全屏展示，强视觉冲击强势锁定新一代的注意力' },
            { card: "大视窗", img: 'https://adyouyi.com/assets/media/b_1_3.mp4', type: 'mp4', des: '超大尺寸信息流 X 动态视频 = 品牌吸睛神器' },
            { card: "联动霸屏", img: 'https://adyouyi.com/assets/media/b_1_4.mp4', type: 'mp4', des: '超强曝光原生触达，赋予品牌信息更大的传递空间开屏与首页焦点联动，长达20秒的创意承载时间，抓人眼球' },
            { card: "焦点图", img: 'https://adyouyi.com/assets/media/b_1_5.mp4', type: 'mp4', des: '首页大流量覆盖25%屏幕占比，充分展现品牌信息' },
        ],
    },
    {
        title: '效果营销',
        content: [
            { card: "信息流大卡", img: 'https://adyouyi.com/assets/media/b_2_1.mp4', type: 'mp4', des: '广告在APP打开时以原生形式出现在视频内容流场景，融入原生场景，结合用户兴趣呈现广告内容，支持站内外多种落地页形式，强势锁定新一代的注意力' },
            { card: "信息流小卡", img: 'https://adyouyi.com/assets/img/b_2_2.png', type: 'png', des: '广告在APP打开时以原生形式出现在视频内容流场景，融入原生场景，结合用户兴趣呈现广告内容，支持站内外多种落地页形式，强势锁定新一代的注意力' },
            { card: "播放页推荐", img: 'https://adyouyi.com/assets/img/b_2_3.png', type: 'png', des: '融入播放页推荐视频，以原生形态自然呈现' },
        ]
    },
    {
        title: '内容营销',
        content: [
            { card: "简单合作", img: 'https://adyouyi.com/assets/img/b_3_1.png', type: 'png', des: '品牌诉求与UP主内容自然结合，渗透传播，触达粉丝' },
            { card: "创作推广", img: 'https://adyouyi.com/assets/img/b_3_2.png', type: 'png', des: '对UP主商单视频进行定向流量推广，助燃优质商单视频获取更多曝光' },
            { card: "邀约广告", img: 'https://adyouyi.com/assets/img/b_3_3.png', type: 'png', des: '在UP主商单中增加强关联广告链接，实现后链路购买/下载转化闭环' },
        ]
    },
]

var active = 0
function tab(pid) {
    var tabs = ["tab1", "tab2", "tab3"];
    for (let i = 0; i < 3; i++) {
        if (tabs[i] == pid) {
            active = i
            document.getElementsByClassName(tabs[i])[0].className = tabs[i] + " checked";
            document.querySelectorAll('#content-list ul').forEach((dom,index)=>{
                dom.style.display = 'none'
                if(index===i){
                    dom.style.display = 'flex'
                    active = i
                }
            })
            document.querySelectorAll('#content-list .right-content').forEach((dom,index)=>{
                dom.style.display = 'none'
                if(index===i){
                    dom.style.display = 'flex'
                    active = i
                }
            })
            document.querySelectorAll('.phone-content').forEach((dom,index)=>{
                dom.style.display = 'none'
                if(index===i){
                    dom.style.display = 'inline-block'
                }
            })
            card('card0', contentArr[i].content.length)
        } else {
            document.getElementsByClassName(tabs[i])[0].className = tabs[i];
        }
    }
}
function card(pid, length) {
    var tabs = []
    for (var i = 0; i < length; i++) {
        tabs.push('card' + i);
    }

    for (let i = 0; i < tabs.length; i++) {
        document.querySelectorAll('#content-list ul')[active].children[i].className = tabs[i];
        if (tabs[i] == pid) {
            document.querySelectorAll('#content-list ul')[active].children[i].className = tabs[i] + " checked";
            Array.from(document.querySelectorAll('.phone-content')[active].children).forEach((dom,index)=>{
                dom.style.display = 'none'
                if(index===i){
                    dom.style.display = 'inline-block'
                }
            })
            Array.from(document.querySelectorAll('#content-list .right-content')[active].children).forEach((dom,index)=>{
                dom.style.display = 'none'
                if(index===i){
                    dom.style.display = 'inline-block'
                    dom.style.width = '100%'
                    dom.style.whiteSpace = 'inline-block'
                }
            })
        } else {
            document.getElementsByClassName(tabs[i])[0].className = tabs[i];
        }
    }
    setTimeout(() => {
        img.className = 'phone-img'
    }, 1000)
}

function mobileTab(pid) {
    var tabs = ["mobileTab0", "mobileTab1", "mobileTab2"];
    for (let i = 0; i < 3; i++) {
        if (tabs[i] == pid) {
            document.getElementsByClassName(tabs[i])[0].className = tabs[i] + " checked";
            tabClick(i)
        } else {
            document.getElementsByClassName(tabs[i])[0].className = tabs[i];
        }
    }
}

function tabClick(pid) {
    for (var i = 0; i < 9999; i++) {
        clearInterval(i)
    }
    let htmlStr = ''
    for (let i = 0; i < contentArr[pid].content.length; i++) {
        htmlStr += `<div class="swiper-slide">
        <div>
        <h3>${contentArr[pid].content[i].card}</h3>
        <p>${contentArr[pid].content[i].des}</p>
    </div>
    <video loop="loop" muted="muted" autoplay="autoplay" src='${contentArr[pid].content[i].img}' style="display:${contentArr[pid].content[i].type=='png'?'none':'block'}"></video>
                <img  src='${contentArr[pid].content[i].img}' style="display:${contentArr[pid].content[i].type=='png'?'block':'none'}"/>
              </div>`
    }
    mySwiper = ''
    document.getElementById('swiper-wrapper').innerHTML = htmlStr
    mySwiper = new Swiper("#ying_sipder", {
        direction: 'horizontal', //默认horizontal, 水平轮播
        autoplay: true, //自动切换
        loop: true, //循环
        centeredSlides: true,
        slidesPerView: "auto", //默认1, 同时显示的slides数量,auto 代表根据轮播图的宽度排列
        spaceBetween: 20, //轮播图之间的间距
        slideActiveClass: 'my-slide-active',
    })
}